<template>
    <el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
        <!-- 注册赠送 -->
        <el-card shadow="never" class="!border-none">
            <div class="text-xl font-medium mb-[20px]">注册赠送</div>
            <el-form-item label="赠送积分" prop="points">
                <div>
                    <el-input class="!w-[240px]" v-model="formData.points" type="number" :min="0">
                        <template #append> 积分 </template>
                    </el-input>
                    <div class="form-tips">
                        新用户注册，免费赠送积分数量；填写0则表示不赠送
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="赠送训练组" prop="reward_chat">
                <div>
                    <el-input class="!w-[240px]" v-model="formData.train" type="number" :min="0">
                        <template #append> 条 </template>
                    </el-input>
                    <div class="form-tips">
                        新用户注册，免费赠送训练组数量；填写0则表示不赠送
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="赠送智能体" prop="robot">
                <div>
                    <el-input class="!w-[240px]" v-model="formData.robot" type="number" :min="0">
                        <template #append> 个 </template>
                    </el-input>
                    <div class="form-tips">
                        新用户注册，免费送赠智能体数量；填写0则表示不赠送
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="赠送知识库" prop="know">
                <div>
                    <el-input class="!w-[240px]" v-model="formData.know" type="number" :min="0">
                        <template #append> 个 </template>
                    </el-input>
                    <div class="form-tips">
                        新用户注册，免费赠送知识库数量；填写0则表示不赠送
                    </div>
                </div>
            </el-form-item>
            <el-form-item label="赠送MCP" prop="mcp">
                <div>
                    <el-input class="!w-[240px]" v-model="formData.mcp" type="number" :min="0">
                        <template #append> 个 </template>
                    </el-input>
                    <div class="form-tips">
                        新用户注册，免费赠送MCP数量；填写0则表示不赠送
                    </div>
                </div>
            </el-form-item>
        </el-card>

        <!-- 保存按钮 -->
        <el-card shadow="never" class="!border-none mt-4">
            <el-button
                v-perms="['setting:backs:save']"
                :loading="loading"
                type="primary"
                @click="handleSubmit"
            >保存配置</el-button>
        </el-card>
    </el-form>
</template>

<script setup lang="ts">
import feedback from '@/utils/feedback'
import marketRegisterApi from '@/api/market/register'

const loading = ref(false)
const formRef = ref()
const formData = reactive({
    status: 0,
    points: 0,
    train: 0,
    robot: 0,
    know: 0,
    mcp: 0
})


const MinNumValidator = (_rule: any, value: number, callback: any) => {
    if (value < 0) {
        callback(new Error('输入不能小于0'))
    } else {
        callback()
    }
}

// 表单验证
const rules = {
    points: [
        { validator: MinNumValidator, trigger: 'blur' }
    ],
    train: [
        { validator: MinNumValidator, trigger: 'blur' }
    ],
    robot: [
        { validator: MinNumValidator, trigger: 'blur' }
    ],
    know: [
        { validator: MinNumValidator, trigger: 'blur' }
    ],
    mcp: [
        { validator: MinNumValidator, trigger: 'blur' }
    ]
}

/**
 * 查询配置参数
 */
const queryConfigs = async (): Promise<void> => {
    const data = await marketRegisterApi.detail()
    Object.assign(formData, data)
}

/**
 * 提交修改参数
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate()

    loading.value = true
    await marketRegisterApi.save(formData)
        .finally(() => {
            setTimeout(() => {
                loading.value = false
            }, 500)
        })

    await queryConfigs()
    feedback.msgSuccess('保存成功')
}

onMounted(async () => {
    await queryConfigs()
})
</script>
